iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 20
1
Modern Web

WebGL 與 Three.js 初探系列 第 20

[Day20] Three.js dat.GUI

  • 分享至 

  • xImage
  •  

今天來介紹在 three.js 開發中常會遇到的小工具。

http://ithelp.ithome.com.tw/upload/images/20170103/20103565hGhwpXzDet.png

寫網頁的工程師們應該都會習慣打開 console 調整、或是列印參數。但是在 canvas 當中,要 debug 卻相當不容易,好在目前有一些很方便的 debug 工具,可以很快速地讓我們調整參數,或是觀察目前的狀態。

大家在看一些 three.js 範例時,有時候會看見右上方有個小小的控制面板,很方便地讓使用者(或是開發者)調整參數。

這其實是使用 dat.GUI 實作,在開發上常常會用到。

var FizzyText = function() {
  this.message = 'dat.gui';
  this.speed = 0.8;
  this.displayOutline = false;
  this.explode = function() { ... };
  // Define render logic ...
};

window.onload = function() {
  var text = new FizzyText();
  var gui = new dat.GUI();
  gui.add(text, 'message');
  gui.add(text, 'speed', -5, 5);
  gui.add(text, 'displayOutline');
  gui.add(text, 'explode');
};

使用起來非常簡單明瞭,只要建立好 class,並且把要控制的屬性宣告為 public,再透過 gui.add 方法加入到面板當中,就可以直接在頁面上控制參數。

官網的範例當中已經提供非常多的範例,這邊就省略實作的部分了。

其實這並不算 Three.js 的 API,就算不是使用 three.js 做開發,只要能夠讓 gui 存取到屬性就可以在頁面上控制參數了!

Three.js debug 工具

three.js 當中內建了許多 helper 幫助開發者快速 debug

VertexNormalsHelper FaceNormalsHelper

只要將 helper 加入 scene 即可。

scene.add(new THREE.VertexNormalsHelper(mesh,10));

WireFrameHelper

將材質轉為 wireframe 的形狀(沒有材質,採用圖形拼接的方式)

成果會像這樣:(似乎也可以當某種效果使用?)
http://ithelp.ithome.com.tw/upload/images/20170103/20103565nhHoR0ggGn.png

其他工具

  • webGL inspector google chome 的 extension,能夠讓你看到 webGL 目前的狀態,包含 shader program 以及 buffer 裡頭的資訊,如果想要從別人的 webGL 裡面挖寶,可以用這個是看。
  • shader editor 可以直接編輯 shader,直接套用到網站當中,不需要再更新網站,也不用在編輯器重寫。非常方便,還能夠幫你抓紋理。

three.js debug


上一篇
[Day19] Three.js 實戰 (2) - 全景圖實作
下一篇
[Day21] Three.js 理論篇 - 碰撞檢測淺談
系列文
WebGL 與 Three.js 初探30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
法蘭克
iT邦新手 4 級 ‧ 2017-01-04 12:38:22

hello 感謝你的文章,有固定在follow,希望繼續下去哈哈哈加油。
想請問有沒有推薦的大師可以follow,或是筆者固定在瀏覽關於three.js的project,有點好奇。感謝~

我要留言

立即登入留言